<template>
  <div class="left-content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 未采集 -->
      <el-tab-pane label="未采集" name="1">
        <el-input v-model="filterTextNo" clearable placeholder="输入关键字进行过滤">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="new-flex">
          <el-tree
            ref="treeNo"
            clearable
            class="filter-tree"
            :data="dataNo"
            :props="defaultProps"
            node-key="id"
            icon-class="el-icon-arrow-right"
            :default-expanded-keys="['00']"
            :filter-node-method="filterNodeNo"
            @node-click="changeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <draggable
                @end="end(arguments,node, data)"
                @start="move"
                v-model="dataNo"
                :options="draggableOptions"
              >
                <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
                  <span class="treeIcon" :class="{actived:tableId === node.id}" :data="data">
                    <i class="iconfont treeIcon" :class="data.icon" style="margin:0 5px;"></i>
                    {{ node.label}}
                  </span>
                </el-tooltip>
              </draggable>
            </span>
          </el-tree>
          <div class="tree-shua" @click="initTree">
            <i class="OSS iconshuaxin" style="color:#828D90"></i>
          </div>
        </div>
      </el-tab-pane>
      <!-- 已采集 -->
      <el-tab-pane label="已采集" name="2">
        <el-input v-model="filterTextHas" clearable placeholder="输入关键字进行过滤">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="new-flex">
          <el-tree
            ref="treeHas"
            class="filter-tree"
            :data="dataHas"
            :props="defaultProps"
            icon-class="el-icon-arrow-right"
            :filter-node-method="filterNodeHas"
            :default-expanded-keys="['00']"
            node-key="id"
            @node-click="changeClickHas"
          >
            <span slot-scope="{ node,data }" class="custom-tree-node">
              <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
                <span class="treeIcon" :class="{actived:tableId === node.id}" :data="data">
                  <i class="iconfont treeIcon" :class="data.icon" style="margin:0 5px;"></i>
                  {{ node.label}}
                </span>
              </el-tooltip>
            </span>
          </el-tree>
          <div class="tree-shua" @click="initTreeHas">
            <i class="OSS iconshuaxin" style="color:#828D90"></i>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import draggable from "vuedraggable";

var mousePosition = {
  left: -1,
  top: -1
};
export default {
  data() {
    return {
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: "tt",
        // 不使用H5原生的配置
        forceFallback: true
        // 拖拽的时候样式
        // fallbackClass: 'flow-node-draggable'
      },
      tableId: "",
      activeName: "1", // tabs页签
      filterTextNo: "",
      filterTextHas: "",
      dataNo: [],
      dataHas: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  watch: {
    filterTextNo(val) {
      this.$refs.treeNo.filter(val);
    },
    filterTextHas(val) {
      this.$refs.treeHas.filter(val);
    }
  },
  created() {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function(event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX;
        mousePosition.top = event.clientY - 50;
        event.preventDefault();
        event.stopPropagation();
      };
    }
  },
  mounted() {
    this.initTree();
  },
  methods: {
    ...mapMutations("flow", ["setFlowList"]),
    // 未采集树结构
    async initTree() {
      this.filterTextNo = "";
      this.dataNo = [
        { label: "全部", id: "00", icon: "icon-shujiegou_quanbu", children: [] }
      ];
      const res = await this.$api.home.initTree();
      if (res.data.resultCode === 0) {
        this.$set(this.dataNo[0], "children", [...res.data.data.unCollect]);
        this.dataNo = JSON.parse(
          JSON.stringify(this.dataNo).replace(
            new RegExp("dataSourceInfo", "g"),
            "children"
          )
        );
        this.dataNo = JSON.parse(
          JSON.stringify(this.dataNo).replace(
            new RegExp("tableInfo", "g"),
            "children"
          )
        );
        this.dataNo = JSON.parse(
          JSON.stringify(this.dataNo).replace(
            new RegExp("dataSourceName", "g"),
            "label"
          )
        );
        this.dataNo = JSON.parse(
          JSON.stringify(this.dataNo).replace(
            new RegExp("businessSystemName", "g"),
            "label"
          )
        );
        this.dataNo = JSON.parse(
          JSON.stringify(this.dataNo).replace(
            new RegExp("chineseName", "g"),
            "label"
          )
        );
      }
    },
    // 已采集树结构
    async initTreeHas() {
      this.filterTextHas = "";
      this.dataHas = [
        { label: "全部", id: "00", icon: "icon-shujiegou_quanbu", children: [] }
      ];
      const res = await this.$api.home.initTree();
      if (res.data.resultCode === 0) {
        this.$set(this.dataHas[0], "children", [...res.data.data.collected]);
        this.dataHas = JSON.parse(
          JSON.stringify(this.dataHas).replace(
            new RegExp("dataSourceInfo", "g"),
            "children"
          )
        );
        this.dataHas = JSON.parse(
          JSON.stringify(this.dataHas).replace(
            new RegExp("tableInfo", "g"),
            "children"
          )
        );
        this.dataHas = JSON.parse(
          JSON.stringify(this.dataHas).replace(
            new RegExp("dataSourceName", "g"),
            "label"
          )
        );
        this.dataHas = JSON.parse(
          JSON.stringify(this.dataHas).replace(
            new RegExp("businessSystemName", "g"),
            "label"
          )
        );
        this.dataHas = JSON.parse(
          JSON.stringify(this.dataHas).replace(
            new RegExp("chineseName", "g"),
            "label"
          )
        );
      }
    },
    handleClick(val) {
      const obj = {
        readOnly: false,
        nodeList: [],
        lineList: []
      };
      this.$store.commit("setEmpty");
      this.setFlowList(obj);
      if (val.name === "1") {
        this.$store.commit("setReadOnlyFlag", false);
        this.initTree();
      } else {
        this.$store.commit("setReadOnlyFlag", true);
        this.initTreeHas();
      }
      console.log(this.$store.state.tree.readOnlyFlag);
    },
    changeClick(node, data) {
      if (!node.children) {
        this.tableId = data.id;
      }

      // 该节点有tableId才可以点击
      if (node.tableId) {
        if (this.$store.state.tree.hasPoint) {
          this.$message({
            message: "已存在接入源",
            type: "warning"
          });
        } else {
          const myNode = {
            name: node.label,
            type: "start",
            viewFoot: "Source",
            icon: require("@/assets/image/source.png")
          };
          this.$emit("addPoint", myNode);
          // 点击获取接入源信息
          this.sourceInfo(node.tableId);
          const isStream = !data.parent.data.isStream
            ? 0
            : data.parent.data.isStream;
          this.treePointInfo(
            data.parent.parent.data.systemMark,
            data.parent.parent.data.businessSystemId,
            data.parent.data.dataSourceId,
            node.tableId,
            isStream,
            node.dataStructure,
            data.parent.data.assetSourceDialectType
          );
        }
      }
    },
    // 提交树节点信息给外层对象提交
    treePointInfo(
      systemMark,
      assetBusinessSystemId,
      assetDataSourceId,
      assetLogicTableId,
      isStream,
      dataStructure,
      assetSourceDialectType
    ) {
      const obj = {
        systemMark,
        assetBusinessSystemId,
        assetDataSourceId,
        assetLogicTableId,
        isStream,
        dataStructure,
        assetSourceDialectType
      };
      console.log(obj, "baoll");
      this.$store.commit("setWrapInfo", obj);
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {},
    // 拖拽结束时触发
    end(arg, data, node) {
      if (!node.children) {
        this.tableId = data.id;
      } else {
        return false;
      }

      // 该节点有tableId才可以点击
      if (node.tableId) {
        if (this.$store.state.tree.hasPoint) {
          this.$message({
            message: "已存在接入源",
            type: "warning"
          });
        } else {
          const myNode = {
            name: node.label,
            type: "start",
            viewFoot: "Source",
            icon: require("@/assets/image/source.png")
          };
          this.$emit("dragPointLeft", arg[0], myNode, mousePosition);
          // 点击获取接入源信息
          this.sourceInfo(node.tableId);
          const isStream = !data.parent.data.isStream
            ? 0
            : data.parent.data.isStream;
          this.treePointInfo(
            data.parent.parent.data.systemMark,
            data.parent.parent.data.businessSystemId,
            data.parent.data.dataSourceId,
            node.tableId,
            isStream,
            node.dataStructure,
            data.parent.data.assetSourceDialectType
          );
        }
      }
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") > -1) {
        return true;
      }
      return false;
    },
    changeClickHas(node, data) {
      if (!node.children) {
        this.tableId = data.id;
      }
      if (node.tableId) {
        // 点击获取接入源信息
        this.$store.commit("setIsLink", false);
        this.sourceInfoHas(node.tableId);
        const isStream = !data.parent.data.isStream
          ? 0
          : data.parent.data.isStream;
        this.treePointInfo(
          data.parent.parent.data.systemMark,
          data.parent.parent.data.businessSystemId,
          data.parent.data.dataSourceId,
          node.tableId,
          isStream,
          node.dataStructure,
          data.parent.data.assetSourceDialectType
        );
      }
    },
    // 已采集获取表信息
    async sourceInfoHas(tableId) {
      const res = await this.$api.home.sourceInfoHas(tableId);
      if (res.data.resultCode === 0) {
        this.$store.commit("setViewInfo", res.data.data);
        this.setFlowList(JSON.parse(res.data.data.frontParameter));
        this.sourceInfoOver(tableId);
        console.log(this.$store.state.tree.submitInfo, "看一看");
      } else {
        this.$message({ message: res.data.resultMessage, type: "error" });
      }
    },
    async sourceInfo(tableId) {
      const res = await this.$api.home.sourceInfo(tableId);
      if (res.data.resultCode === 0) {
        this.$store.commit("setSourceInfo", res.data.data);
        console.log(this.$store.state.tree.sourceInfo, "保存了");
      } else {
        this.$message({ message: res.data.resultMessage, type: "error" });
      }
    },
    async sourceInfoOver(tableId) {
      const res = await this.$api.home.sourceInfoOver(tableId);
      if (res.data.resultCode === 0) {
        this.$store.commit("setSourceInfo", res.data.data);
        console.log(this.$store.state.tree.sourceInfo, "保存了");
      } else {
        this.$message({ message: res.data.resultMessage, type: "error" });
      }
    },
    filterNodeNo(value, data, node) {
      console.log(node, "几级");
      if (!value) return true;
      if (node.level === 4) {
        return data.label.indexOf(value) !== -1;
      }
    },
    filterNodeHas(value, data, node) {
      if (!value) return true;
      if (node.level === 4) {
        return data.label.indexOf(value) !== -1;
      }
    }
  },

  components: { draggable }
};
</script>

<style lang="scss" scoped>
.actived {
  color: #0090ff !important;
}
.left-content {
  padding: 20px 31px 20px 45px;
  height: 93%;
  overflow: auto;
}
/deep/ {
  .el-tabs__nav-wrap.is-scrollable {
    padding: 0;
  }
  .el-tabs__item {
    padding: 0;
    width: 88px !important;
    text-align: center;
  }
  .el-tabs__nav-prev,
  .el-tabs__nav-next {
    display: none;
  }
  .el-tree {
    background: transparent;
    width: 160px;
    .el-tree-node__content {
      height: 30px;
    }
  }
  .el-tree-node__expand-icon {
    color: #0090ff;
    font-size: 14px;
  }
  .el-tree-node__expand-icon.is-leaf {
    color: transparent;
  }
  .el-input {
    margin: 10px 0 20px 0;
    .el-input__suffix-inner {
      color: #0090ff;
      font-size: 15px;
    }
    .el-input__inner {
      height: 35px;
    }
    .el-icon-search {
      float: right;
    }
  }
  .custom-tree-node {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .new-flex {
    display: flex;
    justify-content: space-between;
    .tree-shua {
      width: 20px;
      cursor: pointer;
    }
  }
  .el-tree-node__content {
    display: flex;
    .custom-tree-node {
      flex: 1;
    }
  }
  .treeIcon {
    color: #606266;
  }
}
</style>
